<template>
  <div class="login">
    <div class="login_center">
      <div class="card_header">孖洲岛修造船基地能源管理平台</div>
      <a-form :model="loginFormState" :rules="rules">
        <a-form-item
          name="userName"
          :rules="[
            { required: true, message: '账号不能为空', trigger: 'blur' },
          ]"
        >
          <a-input
            v-model:value="loginFormState.userName"
            :maxlength="32"
            placeholder="请输入账号"
            clearable
          >
            <template #prefix>
              <UserOutlined :style="{ color: '#1890FF' }" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          name="password"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 5, max: 16, message: '密码长度为5-16位', trigger: 'blur' },
          ]"
        >
          <a-input-password
            v-model:value="loginFormState.password"
            :maxlength="16"
            placeholder="请输入密码"
            clearable
          >
            <template #prefix>
              <LockOutlined :style="{ color: '#1890FF' }" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            style="width: 100%"
            :loading="loading"
            @click="handleLogin"
            >登 录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/store/index.js";
import { Form } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

const useForm = Form.useForm;

const router = useRouter();
const mainStore = useMainStore();

const loading = ref(false);

const loginFormState = reactive({
  userName: "",
  password: "",
});

const rules = reactive({
  userName: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  pwd: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 5, max: 16, message: "密码长度为5-16位", trigger: "blur" },
  ],
});

const { validate } = useForm(loginFormState, rules);

const handleLogin = () => {
  validate().then(() => {
    loading.value = true;
    mainStore
      .login(loginFormState)
      .then(({ success, data }) => {
        if (success) {
          // 路由跳转
          router.push("/emission_monitor_chart");
        }
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

const keydown = (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    event.stopPropagation();
    handleLogin();
  }
};
onMounted(() => {
  document.addEventListener("keydown", keydown);
});

onUnmounted(() => {
  document.removeEventListener("keydown", keydown);
});
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/bg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .login_center {
    width: 396px;
    height: auto;
    background-color: inherit;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);

    .card_header {
      text-align: center;
      margin-bottom: 30px;
      font-size: 1.5em;
    }
  }
}
</style>
